<template>
      <div class="index-box">
            <!-- 搜索信息 -->
            <div class="query-box">
                  <el-input 
                        placeholder="请输入内容" 
                        v-model="queryLeft" 
                        @keyup.enter.native="getMovieListByTypeName()" 
                        @clear="clearQuery" 
                        class="input-with-select queryLeft">
                        <el-select v-model="select" slot="prepend" placeholder="请选择">
                              <el-option label="电影类型" value="1"></el-option>
                              <el-option label="演员姓名" value="2"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" @click="getMovieListByTypeName()"></el-button>
                  </el-input>
                  <el-autocomplete
                        v-model="query"
                        :fetch-suggestions="querySearch"
                        clearable
                        @clear="clearQuery"
                        @keyup.enter.native="searchMoive()"
                        placeholder="输入电影名"
                        suffix-icon="el-icon-search"
                  ></el-autocomplete>
            </div>
            <!-- v-if="item.movieState===0" 主信息-->
            <div class="content">
                  <el-empty :image-size="50" style="height:400px" v-if="emptyState"></el-empty>
                  <el-card v-for="(item,index) in movieList" :key="index" @click.native="movieDetail(item)" shadow="hover" class="m-card">
                        <img :src="item.movieCover" :title="item.movieDescript" width="100%" height="180px">
                        <span style="color:#eeac15">
                              <vip v-if="item.movieVip === 0" theme="outline" size="20" fill="#eeac15"/>
                              影名：{{item.movieName}}
                        </span><br>
                        <span>
                              主演：{{item.mainPerformer}} 
                              <label style="background-color:#e74712">{{item.movieVip | vipTxt}}</label>
                        </span><br>
                        <span>上映时间：{{item.putTime}}</span><br>
                        <span>
                              影片类型：{{item.movieType}}
                        </span><br>
                        <span>其他演员：{{item.vicePerformer}}</span>
                        <hr/>
                        <i  v-if="collIcon1" class="el-icon-star-off" title="收藏" @click.stop="collectionMovie(item)"></i>
                        <svg v-if="collIcon2" @click.stop="cancelCollect(item)" t="1649571982108" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23663" width="32" height="32"><path d="M517.44768 24.9856c267.4688 5.12 472.61696 207.81056 473.31328 470.1184 0.69632 269.43488-197.34528 476.672-470.56896 478.9248-268.14464 2.21184-474.64448-199.96672-475.87328-473.33376C43.13088 232.67328 249.77408 30.33088 517.44768 24.9856z" fill="#FCEBB8" p-id="23664"></path><path d="M314.44992 763.61728c8.00768-51.69152 12.16512-98.7136 23.4496-143.93344 6.656-26.66496-0.53248-42.35264-18.24768-59.35104-27.62752-26.48064-53.92384-54.41536-80.56832-81.94048-15.81056-16.32256-34.67264-33.54624-26.56256-58.44992 9.23648-28.38528 35.47136-35.328 62.58688-39.05536 34.34496-4.7104 68.42368-11.61216 102.8096-15.83104 27.2384-3.33824 41.984-16.71168 51.79392-42.88512 14.0288-37.31456 31.744-73.5232 50.9952-108.50304 23.57248-42.86464 59.33056-43.25376 83.31264-1.18784 17.2032 30.14656 35.4304 61.11232 44.50304 94.12608 13.14816 47.8208 45.7728 59.84256 88.22784 63.7952 29.30688 2.72384 58.7776 6.47168 87.53152 12.67712 51.79392 11.20256 69.632 55.02976 28.81536 85.27872-102.01088 75.65312-123.1872 167.07584-84.31616 283.72992 13.45536 40.36608-33.34144 73.17504-68.42368 47.26784-93.65504-69.20192-180.61312-72.54016-274.49344-0.47104-33.03424 25.41568-71.0656-0.55296-71.41376-35.26656z" fill="#FEC73C" p-id="23665"></path><path d="M485.0688 412.52864c8.2944 0.55296 19.06688-1.65888 22.44608 7.80288 4.75136 13.23008-6.656 19.2512-16.30208 21.0944-36.59776 7.02464-58.24512 27.42272-63.46752 64.75776-1.26976 9.09312-6.53312 18.37056-15.72864 17.42848-12.30848-1.26976-14.29504-12.63616-14.49984-23.73632-0.77824-40.3456 46.2848-87.47008 87.552-87.3472z" fill="#FEF9EE" p-id="23666"></path></svg>
                        
                        <i v-if="downIcon1" class="el-icon-download" title="下载" @click.stop="downloadMovie(item)"></i>
                        <svg v-if="downIcon2" @click.stop="againDownload(item)" t="1649572293116" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2740" width="32" height="32"><path d="M512 909.061224c-218.906122 0-397.061224-178.155102-397.061224-397.061224s178.155102-397.061224 397.061224-397.061224 397.061224 178.155102 397.061224 397.061224-178.155102 397.061224-397.061224 397.061224z" fill="#16C4AF" p-id="2741"></path><path d="M512 730.383673c-10.971429 0-19.853061-8.881633-19.853061-19.853061V313.469388c0-10.971429 8.881633-19.853061 19.853061-19.853061s19.853061 8.881633 19.853061 19.853061v397.061224c0 10.971429-8.881633 19.853061-19.853061 19.853061z" fill="#C3F4EA" p-id="2742"></path><path d="M512 730.383673c-5.22449 0-9.926531-2.089796-14.106122-5.746938-7.836735-7.836735-7.836735-20.37551 0-28.212245l160.914285-160.914286c7.836735-7.836735 20.37551-7.836735 28.212245 0 7.836735 7.836735 7.836735 20.37551 0 28.212245l-160.914286 160.914286c-4.179592 3.657143-8.881633 5.746939-14.106122 5.746938z" fill="#C3F4EA" p-id="2743"></path><path d="M512 730.383673c-5.22449 0-9.926531-2.089796-14.106122-5.746938l-160.914286-160.914286c-7.836735-7.836735-7.836735-20.37551 0-28.212245 7.836735-7.836735 20.37551-7.836735 28.212245 0l160.914285 160.914286c7.836735 7.836735 7.836735 20.37551 0 28.212245-4.179592 3.657143-8.881633 5.746939-14.106122 5.746938z" fill="#C3F4EA" p-id="2744"></path></svg>
                        <i class="el-icon-edit" title="发表评论" @click.stop="commentMovie(item)"></i>
                        <i class="el-icon-view" title="查看评论" @click.stop="lookAllCommentMovie(item)"></i>       
                  </el-card>
            </div>
            <!-- 分页 -->
            <div class="m-pagination">
                  <el-pagination
                        background 
                        style="margin-left:20px;margin-top:20px;margin-bottom:9px"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryMovieInfoVo.page"
                        :page-sizes="[30, 40, 50, 60]"
                        :page-size="queryMovieInfoVo.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totals">
                  </el-pagination>
            </div>
            <!-- 电影播放弹窗 -->
            <el-dialog
                  :title="movieObject.movieName"
                  :visible.sync="VideoDialogVisible"
                  width="70%">
                  <VideoPlayer class="video-box" :key="currentTime" :PlayerPause="PlayerState" :MovieSrc="movieUrl" :MovieCover="movieCover"/>
                  <div class="comment-box">
                        评论列表
                        <hr>
                        <div class="comment-detail">
                              <div class="other-com" v-for="(item,index) in commentList" :key="index">
                                    <el-image 
                                          style="width: 50px; height: 50px"
                                          :src="item.comWithUrl" 
                                          :preview-src-list="comWithSrcList">
                                    </el-image>
                                    <p class="com-detail" :title="item.comContent" v-if="currUser.userId === item.userId">
                                    <span style="color:red">{{item.comContent | watchContent}}</span>
                                    </p>
                                    <p class="com-detail" :title="item.comContent" v-else-if="currUser.userId !== item.userId">
                                          {{item.comContent | watchContent}}
                                    </p>
                              </div>
                        </div>
                  </div>
            </el-dialog>
      </div>
</template>

<script>
import {Vip} from '@icon-park/vue';
import VideoPlayer from '@/components/commons/VideoPlayer';
import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';
import { testJson,currUser } from '@/components/test/Test.js';
import { isLogin } from '@/utils/auth.js';
export default {
      components:{
            VideoPlayer,
            Vip
      },
      data(){
            return{
                  movieList:[],
                  queryMovieInfoVo:{
                        page:1,
                        pageSize:25,
                        movieName:'',
                        movieType:'',
                        mainPerformer:'',
                        vicePerformer:''
                  },
                  query:"",
                  searchHistory:[],
                  // 多条件搜索
                  queryLeft: '',
                  select:'',
                  totals:0,
                  VideoDialogVisible:false,
                  PlayerState:'',
                  movieObject:{},
                  movieUrl:'',
                  movieCover:'',
                  //重新加载播放器实现实时刷新
                  currentTime:'',
                  //请求前缀
                  prefix:'/videos/videos-services',
                  vipTxt:'',
                  token:'',
                  emptyState:true,
                  comWithSrcList:[
                        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                  ],
                  //评论列表
                  commentList:[
                        {
                        "userId":"11111111111111",
                        "comWithUrl":"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "comContent":"我发表的评论!!!!"
                        },
                        {
                        "userId":"81111111111111",
                        "comWithUrl":"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "comContent":"我发表的评论222!!!!"
                        },
                        {
                        "userId":"11111111111611",
                        "comWithUrl":"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "comContent":"我发表的评论888!!!!"
                        },
                        {
                        "userId":"11111111551111",
                        "comWithUrl":"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "comContent":"我发表的评论777wewwwwww!!!!"
                        },
                        {
                        "userId":"11311111111111",
                        "comWithUrl":"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "comContent":"我发表的评论555!!!!"
                        },
                        {
                        "userId":"11111111111111",
                        "comWithUrl":"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "comContent":"我发表的评论666wewewew!!!!"
                        },
                        {
                        "userId":"11111112111111",
                        "comWithUrl":"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "comContent":"我发表的评论444!!!!"
                        },
                        {
                        "userId":"11111111211111",
                        "comWithUrl":"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "comContent":"我发表的评论333!!!!"
                        }
                  ],
                  currUser:{
                        userId:"-1",
                        userAvatar:"",
                        userName:"",
                        userPassword:"",
                        usersState:"",
                        registerTime:"",
                        userDescript:""
                  },
                  // 收藏图标
                  collIcon1:true,
                  collIcon2:false,
                  // 下载图标
                  downIcon1:true,
                  downIcon2:false
            }
      },
      mounted(){
            this.loadAll();
      },
      // 计算属性
      computed:{
            vuexFlag(){
                  return this.$store.state.flag;
            }
      },
      // 监听器
      watch:{
      //点击空白出关闭播放框后暂停视频
            VideoDialogVisible(){
                  if(this.VideoDialogVisible===false){
                        this.PlayerState='push';
                  }else{
                        this.PlayerState='play';
                  }
            },
            vuexFlag(val){
                  if(val){
                        this.movieList = this.$store.state.movieList;
                        this.totals = this.$store.state.totals;
                  }
            }
      },
      // 过滤器
      filters:{
            vipTxt(val){
                  if(val ===0){
                        return "(vip充值后观看)";
                  }else{
                        return "(免费观看)";
                  }
            },
            //评论超出长度隐藏
            watchContent(val){
                  // console.log(val.length);
                  if(val.length > 13){
                        return val.substring(0,13) + '...';
                  }else{
                        return val;
                  }
            }
      },
      created(){
            this.token=JSON.parse(sessionStorage.getItem('token'));
            // this.currUser = currUser;
            let currUser = JSON.parse(sessionStorage.getItem('currentUser'));
            if(currUser !== null){
                  this.currUser = currUser;
            }
            // 判断是否登录
            if(this.token == null || this.token == ''){
                  // 未登录
                  this.getLogoutMovieList();
            
            }else{
                  // 登录
                  this.getMovieList();
            }
            console.log("store:"+this.$store.state.loginState);         
      },
      methods:{
            ...mapMutations(['updateFlag']),
            // 判断是否登录
            isLoginMethod(){
                  if(isLogin()){
                        console.log("登录检索...");
                        this.getMovieList();
                  }else{
                        this.getLogoutMovieList();
                  }
            },
            // 登录获取列表
            getMovieList(){
                  let params = `page=${this.queryMovieInfoVo.page}&pageSize=${this.queryMovieInfoVo.pageSize}&movieType=${this.queryMovieInfoVo.movieType}&mainPerformer=${this.queryMovieInfoVo.mainPerformer}`;
                  this.$http.get(this.prefix+'/queryMovieInfoByPage?'+params).then((res)=>{
                        // console.log(res);
                        if(res.data.code === '0' || res.data.msg ==='success'){
                              if(res.data.data.movieList.length === 0){
                                    this.emptyState=true;
                              }else{
                                    this.emptyState=false;
                              }
                              this.movieList=res.data.data.movieList;
                              this.totals=res.data.data.totals;
                        }else{
                              //限流
                              this.$message.error(res.data.msg); 
                        }
                  }).catch(err=>{
                        this.$message.error(err.response.data.message);
                  });
            },
            // 未登录获取
            getLogoutMovieList(){
                  // this.movieList = testJson;
                  // this.emptyState = false;
                  let params = `page=${this.queryMovieInfoVo.page}&pageSize=${this.queryMovieInfoVo.pageSize}&movieName=${this.queryMovieInfoVo.movieName}`;
                  this.$http.get(`${this.prefix}/queryCommonsMovies?`+params).then((res)=>{
                        // console.log(res);
                        if(res.data.code === 200){
                              this.movieList=res.data.data.movieList;
                              if(this.movieList.length === 0){
                                    this.emptyState=true;
                              }else{
                                    this.emptyState=false;
                              }
                              this.totals=res.data.data.totals;
                        }else{
                              //出错页面  限流
                              this.$message.error(res.data.msg);                             
                        }
                  }).catch(err=>{
                        // this.$message.error(",请联系管理员");
                        this.$message.error("系统异常:"+err.response.data.message);
                        this.$router.push('/500');
                        // this.$router.push("/500");
                  });
            },
            //点击播放
            movieDetail(movie){
                  if(movie.movieVip === 0){
                        this.$message.warning('请充值后查看!!!');
                  }else{
                        this.movieUrl=movie.movieUrl;
                        this.movieCover=movie.movieCover;
                        this.currentTime = new Date().getTime();
                        this.movieObject=movie;
                        this.VideoDialogVisible=true;
                  }                 
            },
            //收藏(不用区分是否vip)
            collectionMovie(movie){
                  console.log(movie);
                  this.collIcon1 = false;
                  this.collIcon2 = true;
                  this.$message.success("收藏电影");

            },
            // 取消收藏
            cancelCollect(item){
                  this.collIcon2 = false;
                  this.collIcon1 = true;
                  this.$message.success("取消收藏!!!");
            },
            //下载
            downloadMovie(item){
                  if(item.movieVip === 0){
                        this.$message.warning('请充值后下载!!!');
                  }else{
                        this.downIcon1 = false;
                        this.downIcon2 = true;
                        this.$message.success("下载电影");
                  }                 
            },
            // 再次下载
            againDownload(item){
                  this.$message.success("再次下载");
            },
            //发表评论
            commentMovie(item){
                  if(item.movieVip === 0){
                        this.$message.warning('请充值后发表评论!!!');
                  }else{
                        this.$prompt('请输入您的评论', '提示', {
                              confirmButtonText: '确定',
                              cancelButtonText: '取消'
                        }).then(({ value }) => {
                              this.$message({
                                    type: 'success',
                                    message: '评论:' + value
                              });
                        }).catch(() => {
                              this.$message({
                                    type: 'info',
                                    message: '取消输入'
                              });       
                        });
                  }
            },
            //查看所有评论
            lookAllCommentMovie(item){
                  if(item.movieVip === 0){
                        this.$message.warning("请充值后查看所有评论!!!");
                  }else{
                        this.$message.success("查看所有评论");
                  }
            },
            //分页
            handleSizeChange(val){
                  this.pageSize=val;
                  this.isLoginMethod();
            },
            handleCurrentChange(val){
                  this.page=val;
                  this.isLoginMethod();
            },
            // 顶部搜索  搜索历史
            loadAll() {
                  if(!isLogin()) return null;
                  this.$http.get(`${this.prefix}/queryHistoryMovie`).then((result)=>{
                  // console.log(result);
                        if(result.data.code === 200 && result.data.msg === 'success'){
                              let resultArr = result.data.data;
                              let newResultArr = [];    
                              for(let i=0;i<resultArr.length;i++){
                                    let resultJson = {};
                                    resultJson.value = resultArr[i].searchKey;
                                    newResultArr.push(resultJson);
                              }
                              this.searchHistory = newResultArr;
                        }else{
                              console.log("系统异常,请联系管理员!!!");
                        }
                  });     
            },
            // 清除搜索框
            clearQuery() {
                  this.searchMoive();
            },
            // 右边搜索
            async searchMoive() {
                  // this.$message.success("按下enter");
                  const res =await this.$http.get(`${this.prefix}/queryMoviesBySearchKey/${this.queryMovieInfoVo.page}/${this.queryMovieInfoVo.pageSize}?searchKey=${this.query}`);
                  console.log(res);
                  if(res.data.code === 200 && res.data.msg === 'success'){
                        this.movieList = res.data.data.searchList;
                        this.totals = res.data.data.totals;
                  }else{
                        this.$message.warning("系统异常,请联系管理员!!!");
                  }
            },
            querySearch(queryString, cb) {
                  var restaurants = this.searchHistory;
                  var results = queryString
                        ? restaurants.filter(this.createStateFilter(queryString))
                        : restaurants;
                  // 调用 callback 返回建议列表的数据
                  clearTimeout(this.timeout);
                  this.timeout = setTimeout(() => {
                        cb(results);
                  }, 2000 * Math.random());
            },
            createStateFilter(queryString) {
                  return state => {
                        return (
                              state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
                        );
                  };
            },
            // 左边搜索 通过类型 1 和 演员名 2 搜索
            getMovieListByTypeName(){
                  if(this.select === '1' && this.queryLeft !== null && this.queryLeft!==''){
                        this.queryMovieInfoVo.movieType = this.queryLeft;
                        console.log("搜素类型:"+this.queryMovieInfoVo.movieType);
                  }else if(this.select === '2' && this.queryLeft !== null && this.queryLeft!==''){
                        this.queryMovieInfoVo.mainPerformer = this.queryLeft;
                        this.queryMovieInfoVo.vicePerformer = this.queryLeft;
                        console.log("搜素名称:"+this.queryMovieInfoVo.movieType);
                  }else{
                        this.$message.warning("请选择搜索条件,检索内容不能为空!!!");
                        this.queryMovieInfoVo.movieType="";
                        this.queryMovieInfoVo.mainPerformer="";
                        this.queryMovieInfoVo.vicePerformer="";
                        this.isLoginMethod();
                        return;
                  }
                  this.isLoginMethod();                 
            }
      }
}
</script>

<style scoped>
@import url('../../assets/css/index.css');
</style>